/**
 * 更多的操作按钮
 * @author: minzhang
 * @update: 2017-03-13
 */

import React, { PropTypes } from 'react';
import { Menu, Dropdown, Icon } from 'antd';

const Item = Menu.Item;

const CommonMoreOpe = React.createClass({
  getInitialState() {
    return {
      visible: false,
    };
  },
	isInArray(item, arr) {
		for(let i = 0; i < arr.length; i++) {
			if(arr[i] === item) {
				return true;
			}
		}
		return false;
	},
  handleMenuClick(e) {
		const closedKeys = this.props.closedKeys || [];
		
    if (this.isInArray(e.key, closedKeys)) {
      this.setState({ visible: false });
    }
  },
  handleVisibleChange(flag) {
    this.setState({ visible: flag });
  },
  render() {
		let {title, list} = this.props;
		title = title || '更多';
		
		const loop = data => data.map((item, index) => {
			return (
				<Item key={index}>{item}</Item>
			);
		});
		
    return (
      <Dropdown 
				trigger={['click']}
				overlay={<Menu onClick={this.handleMenuClick}>{loop(list)}</Menu>}
        onVisibleChange={this.handleVisibleChange}
        visible={this.state.visible}
      >
        <a className="ant-dropdown-link" href="javascript:void(0);">
					{title}<Icon type="down" />
        </a>
      </Dropdown>
    );
  },
});

CommonMoreOpe.propTypes = {
	title: PropTypes.any,
	closedKeys: PropTypes.array,
	list: PropTypes.array,
};

export default CommonMoreOpe;